<template>
  <view class="content">
    <button open-type="contact" @tap="linkCustomer" class="common_style">
      在线联系客服
    </button>
    <view class="operate common_style">操作说明</view>
    <view class="operate common_style">
      勾选你觉得剪辑质量不错的视频进行推广
    </view>
    <view v-if="video_list.length === 0" class="empty"> 暂无可推广视频 </view>
    <view v-else style="width: 100%">
      <uni-forms
        ref="videoform"
        :modelValue="videoformData"
        :rules="videorules"
      >
        <uni-forms-item name="detail_ids">
          <checkbox-group @change="onVideoChange">
            <label v-for="info in video_list" :key="info.id" class="check_box">
              <checkbox
                :value="info.id"
                style="width: 60rpx"
                class="check_item"
              >
              </checkbox>
              <video :src="info.url" class="video" controls></video>
            </label>
          </checkbox-group>
        </uni-forms-item>
        <uni-forms-item>
          <button
            type="default"
            class="common_style push_video"
            :disabled="video_list.length === 0"
            @tap="pushFormSubmit"
          >
            确认推广
          </button>
        </uni-forms-item>
      </uni-forms>
    </view>
  </view>
</template>

<script>
import { clipTaskDetail, clipTaskPublish } from "@/api/index";
export default {
  data() {
    return {
      video_list: [],
      task_id: "",
      videoformData: {
        detail_ids: [],
      },
      videorules: {
        detail_ids: {
          rules: [
            {
              required: true,
              errorMessage: "请选择推广视频",
            },
          ],
        },
      },
    };
  },
  onShow() {
    this.getData();
  },
  methods: {
    linkCustomer() {
      wx.openCustomerServiceChat({
        extInfo: { url: "" },
        corpId: "",
        success(res) {
          console.log("rrrr", res);
        },
      });
    },
    onVideoChange(val) {
      this.videoformData.detail_ids = val.detail.value;
    },
    getData: function (e) {
      clipTaskDetail().then((res) => {
        if (res.code === 0) {
          this.video_list = res.data.list;
          this.task_id = res.data.task_id;
        }
      });
    },
    pushFormSubmit: function (e) {
      this.$refs.videoform
        .validate()
        .then((res) => {
          clipTaskPublish({
            detail_ids: res.detail_ids.map((item) => Number(item)),
            task_id: this.task_id,
          }).then((res) => {
            if (res.code === 0) {
              uni.showToast({
                title: "推广成功",
                icon: "none",
              });
              this.getData();
              this.videoformData.detail_ids = [];
            } else if (res.code === 50200) {
              uni.showModal({
                title: "",
                content: "您当前积分不够,请联系客服",
                showCancel: false,
                confirmText: "联系客服",
                success: function (res) {
                  if (res.confirm) {
                    wx.openCustomerServiceChat({
                      extInfo: { url: "" },
                      corpId: "",
                      success(res) {
                        console.log("rrrr", res);
                      },
                    });
                  }
                },
              });
            } else {
              uni.showToast({
                title: res.msg,
                icon: "none",
              });
            }
          });
        })
        .catch((err) => {
          console.log("表单错误信息：", err);
        });
    },
  },
};
</script>

<style>
.common_style {
  font-size: 30rpx;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20rpx 50rpx;
}

.operate {
  width: 100%;
  text-align: left;
  margin-top: 40rpx;
}

.push_video {
  position: fixed;
  bottom: 20rpx;
  left: 0;
  width: 100%;
}

.empty {
  display: flex;
  width: 100%;
  height: 400rpx;
  align-items: center;
  justify-content: center;
}

.video {
  width: 100%;
  height: 300rpx;
}

.check_box {
  display: flex;
  margin-top: 30rpx;
  align-items: center;
  position: relative;
}

.check_item {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
}
</style>
